<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style type="text/css">
			/* .item {
			    width: 1000px;
			    height: 250px;
			    padding: 50px 10px 35px;
			    position: relative;
			    color: #fff;
				background: #000000;
			}
			/* .item::before{
			    content: "";
			    position: absolute;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    z-index: -1;
			    background: #58a;
			    transform: perspective(5px) rotateX(3deg);
			} */ 
			* {margin: 0;padding: 0;}
			.item {
				width: 900px;
				height: 300px;
				/* padding: 50px 10px 35px; */
				position: relative;
				color: black;
			}
			.item2 {
				width: 720px;
				height: 238px;
				/* padding: 50px 10px 35px; */
				position: relative;
				color: black;
			}
			.item::before,.item2::before {
				content: "";
				position: absolute;
				top: 60px;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
				background-image: url(../../img/advertisement/advertise1.png);
				transform: perspective(50px) rotateX(-2deg);
				/* transform: skewX(30deg); */
				transform-origin: bottom left;
			}
			.item3,.item4 {
				width: 500px;
				height: 200px;
				background: #0000CC;
				transform: skewX(30deg);
				transform-origin: bottom left; 
				float: left;
			}
		</style>
		<div class="item">
		</div>
		<!-- <div class="item2">
		</div> -->
		<!-- <div class="item3"></div>
		<div class="item4"></div> -->
	</body>
</html>